<script setup>
import {
  getTemplateFile
} from "@/api/contract/fileTemplate.js"
import {ref} from 'vue'
import {scrollToTableBottom} from "@/utils/ruoyi.js";
import pageofficeCtrlUtil, {saveWord} from "@/plugins/pageoffice/pageoffice-word-excel.js";
import {dataTagUtil} from "@/plugins/pageoffice/dataTag.js";
import {dataRegionUtil} from "@/plugins/pageoffice/dataRegion.js";
import {templateFileLayout, templateFunctions} from "@/utils/template.js";
import {isNull} from "@/utils/validate.js";
import {getPOHtmlStyle} from "@/plugins/pageoffice/pageoffice-common.js";

const {proxy} = getCurrentInstance()
const poHtml = ref('')
const { titleRef1, rowRef1, titleRef2, rowRef2, getSpecialTableHeight} = templateFileLayout()
const validateDataRegion = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入要添加的编辑区域的标题'))
  } else {
    value = '[' + value + ']'
    let obj = dataRegions.value.find(item => item.value === value)
    if (!isNull(obj)) {
      callback(new Error('当前输入的数据区域已存在，请重新输入'))
    } else {
      callback()
    }
  }
}
const dataRegionRefs = reactive({
  dataRegions: [],
  dataRegionForm: {
    dataRegionValueForAdd: '',
    dataRegionNameForQuery: ''
  },
  addDataRegionRules: {
    dataRegionValueForAdd: [
        { required: true,  message: "请输入要添加的数据区域", trigger: "change" },
        { validator: validateDataRegion, message: "当前数据区域已存在，请重新输入", trigger: "change"}
    ]
  },
  dataRegionTableData: [],
  dataRegionTableRef: null
})
const {dataRegions, dataRegionForm, addDataRegionRules, dataRegionTableData, dataRegionTableRef} = toRefs(dataRegionRefs)
const {queryDataRegion} = templateFunctions(dataRegionForm, dataRegions, dataRegionTableData, dataRegionTableRef)
const dataTagRefs = reactive({
  dataTags: [],
  dataTagForm: {
    dataTagNameForQuery: ''
  },
  dataTagTableData: [],
  dataTagTableRef: null
})
const {dataTags, dataTagForm, dataTagTableData, dataTagTableRef} = toRefs(dataTagRefs)

let templateId = undefined
//标识是否导入的文件
let isImportData = false
//是否固定格式
const isFixedFormat = ref(true)
//正文是否可编辑
const isEdit = ref(false)
//组装控件所需的自定义按钮的参数,
// 数组的第一个元素： 按钮的标题（如果设置为 "-"，表示此按钮是分隔线）；第二个元素： 点击当前按钮时触发的 JavaScript 函数名；第一个元素： 按钮图标的索引；
//组装Word所需的自定义按钮参数
const customButtonsForPO = [
  ["保存", "save", 1],
  ["导入本地文件", "importData", 13],
  ["-", "", 0],
]

onMounted(() => {
  //获取pageoffice客户端传过来的参数
  templateId = pageofficectrl.WindowParams
  getTemplateWordFile()
  //挂载PageOfficeCtrl 控件需要调用的函数，例如控件触发的事件、自定义按钮触发的函数等。
  pageofficeCtrlUtil.jsFunctionMounted(customJSFunctions, customButtonsForPO)
})

function getTemplateWordFile() {
  getTemplateFile(templateId).then(result => {
    poHtml.value = result.html
    isEdit.value = result.save
    let dregions = isNull(result.dataRegions) ? [] : result.dataRegions
    dataRegions.value = dregions
    const initDataTags = isNull(result.dataTags) ? [] : result.dataTags
    dataTags.value = initDataTags
    dataTagTableData.value = initDataTags
    isFixedFormat.value = result.fixedFormat
    if (isFixedFormat.value) {
      dataRegionTableData.value = dregions
    }
  })
}

const customJSFunctions = {
  //控件初始化事件，函数名是指定的，不可修改，此处根据实际情况重写OnPageOfficeCtrlInit事件代码
  OnPageOfficeCtrlInit: () => {
    //添加自定义按钮，这些自定义按钮执行的js函数需要在 window.POPageMounted 挂载
    pageofficeCtrlUtil.addCustomButtons(isEdit.value ? customButtonsForPO : null)
  },
  AfterDocumentOpened: () => {
    if (isImportData) {
      //清除已添加的数据区域
      dataRegions.value = []
    }
  },
  save: ()=> {
    //保存文件自身
    const saveFilePage = '/con/fileTemplate/updateTemplateWord/' + templateId
    //保存设置的数据区域
    const saveDataPage = '/con/fileTemplate/updateTemplateDataRegion/' + templateId
    //执行保存
    saveWord(saveFilePage, saveDataPage)
  },
  importData: ()=> {
    isImportData = true
    pageofficectrl.WordImportDialog()
  },
}

function addDataRegion() {
  let index = 1
  let dataRegionValue = dataRegionForm.value.dataRegionValueForAdd
  let dataRegionName = 'dr' + index
  proxy.$refs["dataRegionFormRef"].validate(valid => {
    if (valid) {
      //检查书签名称是否存在
      while (dataRegionUtil.checkIsExistDataRegion (dataRegionName)) {
        index++
        dataRegionName = 'dr' + index
      }
      dataRegionValue = '[' + dataRegionValue + ']'
      //添加数据区域
      dataRegionUtil.addDataRegion(dataRegionName, dataRegionValue)
      //更新表格
      dataRegions.value.push({
        name: dataRegionName,
        value: dataRegionValue
      })
      dataRegionForm.value.dataRegionNameForQuery = ''
      queryDataRegion()
    }
  })
}

function deleteDataRegion(dataRegionName, index) {
  dataRegionUtil.deleteDataRegion(dataRegionName)
  //更新表格
  dataRegionTableData.value.splice(index, 1)
  dataRegions.value = dataRegions.value.filter((data) => data.name !== dataRegionName)
}

function handleInput(value) {
  // 移除回车换行、空格和英文分号
  dataRegionForm.value.dataRegionValueForAdd = value.replace(/\n+|\r+|\s+|;/g, '');
}

function queryDataTag() {
  let dataTagNameForQuery = dataTagForm.value.dataTagNameForQuery
  if (isNull(dataTagNameForQuery)) {
    dataTagTableData.value = dataTags.value
  } else {
    dataTagTableData.value = dataTags.value.filter((data) => data.toLowerCase().indexOf(dataTagNameForQuery.toLowerCase()) >=0)
  }
  nextTick(() => {
    scrollToTableBottom(dataTagTableRef)
  })
}

</script>

<template>
  <el-row style="height: 100%">
    <el-col :span="8" class="card-box left-container" v-if="isFixedFormat">
      <el-divider content-position="center">
        <el-text ref="titleRef1" type="danger" size="large">数据标签
          <el-tooltip placement="bottom" >
            <template #content>
              <p style="max-width: 300px; word-break: break-all; white-space: normal;">
                合同中添加的数据标签，在起草合同时，会根据起草人输入的内容动态填充为对应的数据。
                要添加数据标签，先在右侧的Word文件中将光标定位到相应位置，然后在数据标签列表中选择要添加的数据标签，点击“添加”按钮，进行添加。
                同一个数据标签可重复添加。</p>
            </template>
            <el-icon :size="18" color="#f56c6c" style="margin-left: 2px;">  <question-filled /> </el-icon>
          </el-tooltip>
        </el-text>
      </el-divider>
      <el-row ref="rowRef1">
        <el-form @submit.native.prevent
            :model="dataTagForm"
            style="width: 100%">
          <el-form-item>
            <el-input v-model="dataTagForm.dataTagNameForQuery" placeholder="请输入可选数据标签的关键词，进行搜索"
                      type="text"
                      @input="queryDataTag"
                      clearable >
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table ref="dataTagTableRef" :data="dataTagTableData" class="table" style="width: 100%;" height="280"
                  scrollbar-always-on>
          <el-table-column label="可选数据标签">
            <template #default="scope">
              {{scope.row}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataTagUtil.locateDataTag(scope.row)"
              >
                定位
              </el-button>
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataTagUtil.addDataTag(scope.row)"
              >
                添加
              </el-button>
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataTagUtil.deleteDataTag(scope.row)"
                  v-if="isEdit"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-divider content-position="center" style="margin-top: 43px;">
        <el-text ref="titleRef2" type="danger" size="large">数据区域
          <el-tooltip placement="bottom" >
            <template #content>
              <p style="max-width: 300px; word-break: break-all; white-space: normal;">
                合同中添加的数据区域，在起草合同时，会根据起草人输入的内容动态填充为对应的数据。
                要添加数据区域，先在右侧的Word文件中将光标定位到相应位置，然后在左侧输入框输入要添加的数据区域，点击“添加”按钮，进行添加。
                数据区域是唯一的，不可重复。
              </p>
            </template>
            <el-icon :size="18" color="#f56c6c" style="margin-left: 2px;">  <question-filled /> </el-icon>
          </el-tooltip>
        </el-text>
      </el-divider>
      <el-row ref="rowRef2">
        <el-form @submit.native.prevent
            :model="dataRegionForm"
            ref="dataRegionFormRef"
            :rules="addDataRegionRules"
            style="width: 100%">
          <el-form-item prop="dataRegionValueForAdd">
            <el-input v-model="dataRegionForm.dataRegionValueForAdd" placeholder="请输入要添加的编辑区域的标题，不可重复"
                      type="text"
                      @input="handleInput"
                      clearable
                      v-if="isEdit">
              <template #append>
                <el-button class="custom-input-button" @click="addDataRegion()"
                           style="background-color: #61bf0e; color: white; border-top-left-radius: 0; border-bottom-left-radius: 0;"
                >添加
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="dataRegionForm.dataRegionNameForQuery" placeholder="请输入已添加的编辑区域的标题关键词，进行搜索"
                      type="text"
                      @input="queryDataRegion"
                      clearable >
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table ref="dataRegionTableRef" :data="dataRegionTableData" class="table" style="width: 100%;" :height="getSpecialTableHeight(280)"
                  scrollbar-always-on>
          <el-table-column prop="value" label="已添加编辑区域"/>
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataRegionUtil.locateDataRegion(scope.row.name)"
              >
                定位
              </el-button>
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteDataRegion(scope.row.name, scope.$index)"
                  v-if="isEdit"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-col>
    <el-col :span="isFixedFormat ? 16 : 24" class="card-box">
      <el-form method="post">
        <!-- 此div用来加载PageOffice客户端控件 -->
        <div :style="getPOHtmlStyle()" v-html="poHtml"></div>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>
.left-container {
  border-right: #d5dbe4 1px dashed;
  height: auto;
}

.left-container .table {
  border: #d5dbe4 1px solid;
  border-radius: 2px;
}
</style>

